<template>
  <div
    id="signPage"
    :class="['left', 'contentWidth' , {'mainBig': $store.state.isCollapse ,'mainSmall': !$store.state.isCollapse }]"
  >
    <div class="header">
      <div class="backTo" v-show="isBackShow" @click="back">
        <img src="../../../static/images/back.png" alt="返回" />
      </div>
      <div class="contentTopLeft left">
        <h2>体征</h2>
      </div>
      <maintopright></maintopright>
      <maintopleftbottom></maintopleftbottom>
    </div>
    <div id="MainPhysicalSignCon" class="mainContent">
      <div class="clearfix">
        <div class="link-list center-block pull-left" v-show="!isBackShow">
          <router-link
            v-for="(item,index) in list"
            :key="item.value"
            :to="{path:item.path,query:{item:5,in:index}}"
            :class="{'router-link-exact-active':ind == index}"
            @click.native="changeBgc(index)"
          >{{item.label}}</router-link>
        </div>
        <div class="pull-right export">
          <button type="button" class="btn btn-default btn-sm" @click="exportClick">导出</button>
        </div>
        <vue-datepicker-local v-if="isShowTime" class="pull-left" v-model="emptyTime" clearable />
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import maintopright from "@/components/main/maintop/maintopRight";
import maintopleftbottom from "@/components/main/maintop/maintopLeftBottom";
import VueDatepickerLocal from "@/components/datepicker/VueDatepickerLocal";
import { exportG } from "@/api/api";
export default {
  data() {
    return {
      isBackShow: false,
      list: [
        { path: "/physicalSignPage", label: "VS" },
        { path: "/physicalSignPage/signsIo/signsIoSubSurface", label: "IO" },
        {
          path: "/physicalSignPage/signsBreathe/signsBreatheSubSurface",
          label: "呼吸"
        }
      ],
      ind: "0",
      emptyTime: "",
      isShowTime: false,
      startDate: "",
      endDate: ""
    };
  },
  watch: {
    $route: {
      handler(val, oldval) {
        //判断是否在体征指标详情页
        if (
          val.path.indexOf(
            "/physicalSignPage/signsDetails/singsDetailsSurface"
          ) != -1 ||
          val.path.indexOf(
            "/physicalSignPage/signsDetails/singsDetailsChart"
          ) != -1
        ) {
          this.isBackShow = true;
        } else {
          this.isBackShow = false;
        }
        //判断是否在呼吸的时间轴页和Io的时间轴页
        if (
          val.path.indexOf("/physicalSignPage/signsIo/signsIoSubSurface") !=
            -1 ||
          val.path.indexOf(
            "/physicalSignPage/signsBreathe/signsBreatheSubSurface"
          ) != -1
        ) {
          this.isShowTime = true;
        } else {
          this.isShowTime = false;
        }
        //当在vs页的时候把选定的类绑定到vs
        if (
          val.path.indexOf("/physicalSignPage/signsVs/signsVsSubSurface") != -1
        ) {
          this.ind = 0;
        }
      }
    }
  },
  mounted() {
    this.isRoute();
    //console.log(this.$route.path.indexOf('/physicalSignPage/signsDetails') != -1)
    if (this.$route.query.in) {
      this.ind = this.$route.query.in;
    } else {
      this.ind = 0;
    }
  },

  methods: {
    exportClick() {
      let str = `?patientID=${this.$store.getters.ID}&startDate=${this.startDate}&endDate=${this.endDate}&sort=desc`
      let href = exportG(str)
      window.open(href)
    },
    changeBgc(index) {
      this.ind = index;
    },
    back() {
      if (this.$route.query.state == 1) {
        this.$router.push({
          path: "/basicInformation",
          query: { item: 1 }
        });
      } else {
        this.$router.push({
          path: "/physicalSignPage/signsVs/signsVsSubSurface",
          query: { item: 5 }
        });
      }
    },
    isRoute() {
      //判断是否在体征指标详情页
      if (
        this.$route.path.indexOf(
          "/physicalSignPage/signsDetails/singsDetailsSurface"
        ) != -1 ||
        this.$route.path.indexOf(
          "/physicalSignPage/signsDetails/singsDetailsChart"
        ) != -1
      ) {
        this.isBackShow = true;
      } else {
        this.isBackShow = false;
      }
      //判断是否在呼吸的时间轴页和Io的时间轴页
      if (
        this.$route.path.indexOf(
          "/physicalSignPage/signsIo/signsIoSubSurface"
        ) != -1 ||
        this.$route.path.indexOf(
          "/physicalSignPage/signsBreathe/signsBreatheSubSurface"
        ) != -1
      ) {
        this.isShowTime = true;
      } else {
        this.isShowTime = false;
      }
    }
  },
  components: {
    maintopright,
    maintopleftbottom,
    VueDatepickerLocal
  }
};
</script>
<style scoped>
#MainPhysicalSignCon {
  overflow-y: auto;
  padding: 20px 0 8px 5px;
}

#MainPhysicalSignCon .link-list a {
  font-size: 16px;
  display: inline-block;
  margin-right: 15px;
}
.link-list {
  padding-left: 45px;
  padding-top: 7px;
  padding-bottom: 13px;
  margin-right: 50px;
}

#MainPhysicalSignCon .link-list a:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 20px;
  background-color: #ccc;
  margin-left: 10px;
  vertical-align: middle;
}
#MainPhysicalSignCon .link-list a:last-child:after {
  width: 0;
}
#MainPhysicalSignCon .link-list a.router-link-exact-active {
  color: #11a7f3;
}
.export{
  padding-right: 30px;
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 425px) {
  .link-list {
    padding-left: 15px;
    padding-top: 7px;
    padding-bottom: 13px;
    margin-right: 15px;
  }
}
@media screen and (max-width: 325px) {
}
</style>
